<template>
	<view class="bt-block item-wrap  py-4 px-2 mb-3" @tap="onTap">
		<view class="font-1 flex item-title">
			<view class="text-bold">{{item.nickName}}</view>
		</view>
		<view class="bt-line-1 my-2"></view>
		<view  class="flex">
			<view class="flex-1">
				<view class="flex item-line">
					<view class="label">手机号</view>
					<view>{{item.phone}}</view>
				</view>
				<view class="flex item-line">
					<view class="label">身份证尾号</view>
					<view>{{getLastFour(item.idCardNo)}}</view>
				</view>
			</view>
			<view class="item-point flex">
				<u--image v-if="item.checked" width="40rpx" height="40rpx" src="/static/images/ui/edu/checked.png"></u--image>
				<u--image v-else width="40rpx" height="40rpx" src="/static/images/ui/edu/uncheck.png"></u--image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"exam-item",
		dicts:["sys_user_sex"], 
		props:["item", "showArrow", "checked"],
		data(){
			return {
				
			}
		},
		methods:{
			onTap(){
				this.$emit("click", true)
			},
			getLastFour(str){
				if(str){
					return str.substring(str.length - 4);
				} else {
					return ''
				}
			}
		}
		
	}
</script>

<style scoped>
	.item-wrap {
		position: relative;
		font-size: 28rpx;
	}
	.item-title {
		align-items: center;
	}
	.item-gap {
		width: 1rpx;
		height: 22rpx;
		/* border-left: 1rpx solid ; */
		background-color: #f0f0f0;
		margin: 0 24rpx;
	}
	.item-line {
		align-items: center;
		font-size: 28rpx;
		margin: 16rpx  0 0 0;
	}
	.item-line .label {
		font-weight: 400;
		text-align: left;
		color: #4e5969;
		margin-right: 72rpx;
		width: 140rpx;
	}
	.item-point{
		align-self: flex-end;
		align-items: flex-end;
	}
	.item-point .point {
		font-size: 48rpx;
		margin-right: 12rpx;
	}
	.item-point .arrow {
	}
	.item-label {
		position: absolute;
		top:0;
		right:0;
		border-radius: 0px 16rpx 0px 16rpx;
		width: 108rpx;
		height: 54rpx;
		line-height: 54rpx;
		color:#FFFFFF;
		text-align: center;
		font-size: 24rpx;
	}
	
	.pass {
		background-color: #1dbf5c;
	}
</style>